var app = new Vue({
	el: '#app',
	data() {
		return {
			isDefault: true, 

			form: {
				aaa: [dayjs().subtract(1, 'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
				bbb: [dayjs().subtract(1, 'month').subtract(1, 'year').format('YYYY-MM-DD'), dayjs().subtract(1, 'year').format('YYYY-MM-DD')],
			},
			nowDate: Tools.switchTime(new Date(), 'yyyy-MM-dd'),
			tj: CONFIG.tj,
			goods: CONFIG.goods,
			chartOption: {},
		}
	},
	computed: {
		// 绿色总量
		greenTotal() {
			if(this.isDefault) {
				return CONFIG.tj.zxl.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				this.chartOption.series[0].data.forEach(num => {
					res += num;
				})
			}
			return res;
		},
		// 黄色总量
		yellowTotal() {
			let res = 0;
			if(this.chartOption?.series?.length) {
				this.chartOption.series[1].data.forEach(num => {
					res += num;
				})
			}
			return res;
		},
		// 总数较上期变化
		totalBfl() {
			if(this.isDefault) {
				return CONFIG.tj.zxl.bhl;
			}
			let res = 0;
			if(this.yellowTotal > 0 && this.greenTotal > 0) {
				res = (this.greenTotal / this.yellowTotal * 100).toFixed(2);
			}
			return res;
		},
		// 商品曝光数，每天取值在15000-30000之间
		spbgs() {
			if(this.isDefault) {
				return CONFIG.tj.spbgcs.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				let days = this.chartOption.series[0].data.length;
				res = days * parseInt(Math.random()*(30000-15000))+15000;
			}
			return res;
		},
		// 商品曝光率
		spbgl() {
			if(this.isDefault) {
				return CONFIG.tj.spbgcs.bhl;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = (Math.random()*(1000-500)+500).toFixed(2);
			}
			return res;
		},
		// 商品点击次数，取值1000-1500
		spdjs() {
			if(this.isDefault) {
				return CONFIG.tj.spdjcs.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				let days = this.chartOption.series[0].data.length;
				res = days * parseInt(Math.random()*(1500-1000))+1000;
			}
			return res;
		},
		// 商品点击率
		spdjl() {
			if(this.isDefault) {
				return CONFIG.tj.spdjcs.bhl;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = (Math.random()*(800-300)+300).toFixed(2);
			}
			return res;
		},
		// 转化率较上期
		zhl() {
			if(this.isDefault) {
				return CONFIG.tj.zhl.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = (Math.random() + Number(this.zhl2)).toFixed(2);
			}
			return res;
		},
		// 转化率较上期
		zhl2() {
			if(this.isDefault) {
				return CONFIG.tj.zhl.bhl;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = Math.random().toFixed(2);
			}
			return res;
		},
	},
	mounted() {
		this.getOptions();
	},
	methods: {
		changeDate() {
			this.isDefault = false;
			this.getOptions();
		},

		getOptions() {
			if(this.form.aaa.length!=2 || !this.form.aaa[0] || !this.form.aaa[1]) {
				return;
			}
			// 获取x轴数据
			let xData = [];
			let diffDays = dayjs(this.form.aaa[1]).diff(dayjs(this.form.aaa[0]), 'day');
			let start = dayjs(this.form.aaa[0]).valueOf();
			for(let i = 0; i < diffDays; i++) {
				xData.push(dayjs(start+i*24*60*60*1000).format('MM-DD'));
			}
			// 获取绿色数据
			let yData1 = [];
			if(this.isDefault) {
				yData1 = CONFIG.chartData.map(item => item.green).slice(0, diffDays);
			} else {
				yData1 = Tools.getRangeData(CONFIG.chatGreenRange, diffDays);
			}
			// 获取黄色数据
			let yData2 = [];
			if(this.isDefault) {
				yData2 = CONFIG.chartData.map(item => item.yellow).slice(0, diffDays);
			} else {
				yData2 = Tools.getRangeData(CONFIG.chatYellowRange, diffDays);
			}
			// let arr = yData1.map((num, index) => {
			// 	return {
			// 		green: num,
			// 		yellow: yData2[index]
			// 	}
			// })
			// console.log(JSON.stringify(arr));

			this.chartOption = {
				color: ['#01A4A4', '#E6A23C'],
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['总销量', '总销量（对比）']
				},
				grid: {
					left: '10px',
					right: '10px',
					bottom: '10px',
					top: '35px',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: xData
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '总销量',
						type: 'line',
						data: yData1,
						smooth: true,
						symbol: 'none',
						areaStyle: {
							opacity: 0.1
						}
					},
					{
						name: '总销量（对比）',
						type: 'line',
						data: yData2,
						smooth: true,
						symbol: 'none',
						areaStyle: {
							opacity: 0.1
						}
					},
				]
			}
		}
	}
})